<template>
  <div id="integralRoleExplain">
    <!-- 上部搜索条件 -->
    <topSearch :form-inline="formInline" @toSearch="searchList"></topSearch>
    <!-- 操作按钮部分 -->
    <div class="table-conBtn">
      <el-button
        v-permission="'wh:system:dict:add'"
        type="warning"
        icon="el-icon-plus"
        @click="editPage('add')"
      >
        新增
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      max-height="490"
      ref="table"
    >
      <el-table-column type="index" width="60" label="序号">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="versionNumber"
        label="版本"
        min-width="150"
      ></el-table-column>
      <el-table-column
        prop="user.userName"
        label="操作人"
        min-width="150"
      ></el-table-column>
      <el-table-column prop="status" label="状态" min-width="150">
        <template slot-scope="scope">
          {{ scope.row.status.toString() | filterName('integralRoleStatus') }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button
            v-permission="'wh:integralRoleExplain:edit'"
            type="text"
            @click="editPage('edit', scope.row.id)"
          >
            编辑
          </el-button>
          <el-button
            v-permission="'wh:integralRoleExplain:del'"
            type="text"
            @click="delSingle(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <dialogRoleExplain
      v-if="dialogData.isShow"
      :dialog-data="dialogData"
      @refresh="refresh"
    ></dialogRoleExplain>
  </div>
</template>
<script>
import topSearch from '@component/intergralManagement/integralSetting/integralRoleExplain/topSearch' // 上部搜索条件
import dialogRoleExplain from '@component/intergralManagement/integralSetting/integralRoleExplain/dialogRoleExplain' // 新增/编辑规则弹窗
import { saveScrollMixins } from '@/mixins/saveScroll'
import { getSearchList } from '@/api/workManagement/videoBatch'
import {
  getIntegralsList,
  delIntegral
} from '@/api/couponsIntegral/integralRole' //接口
export default {
  name: 'integralRoleExplain',
  msg: '用户成长体系-积分设置-积分规则说明',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    dialogRoleExplain
  },
  data() {
    return {
      loading: false,
      total: 0,
      // 搜索条件
      formInline: {
        operator: '', // 修改人
        status: '' // 状态
      },
      dialogData: {
        isShow: false, // 默认隐藏
        type: 'add', // 默认新增
        id: null // 编辑时，传递的参数
      },
      // 表格数据
      tableData: [],
      // 分页数据
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      }
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    this.searchList()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = Object.assign({}, this.searchParams, this.formInline)
      getIntegralsList(
        obj,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* 新增、编辑 */
    editPage(type, id = '') {
      this.dialogData.isShow = true
      this.dialogData.type = type
      this.dialogData.id = id
    },
    // 删除单个
    delSingle(id) {
      this.$confirm('确认删除吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delIntegral(
          id,
          (response) => {
            this.searchList()
          },
          (response) => {
            this.$message.warning('删除失败,' + response.message)
          }
        )
      })
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    /* 编辑后，刷新列表 */
    refresh() {
      this.searchList()
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    }
  }
}
</script>
<style lang="less">
#integralRoleExplain {
  .gray {
    color: #666;
  }
  .table-conBtn {
    .el-dropdown {
      margin: 0 10px;
    }
  }
  .el-table {
    margin-top: 20px;
  }
}
</style>
